<template>
    <div class="timeStampView">
        <!-- 头部  -->
        <div class="timeStampHead">
            归档
            <van-icon name="underway-o" />

        </div>
        <van-steps :active="active" direction="vertical" active-icon="underway" inactive-icon="underway"
            active-color="#1989fa">
            <van-step v-for="item in blogItemList" :key="item.id">
                <span>{{ item.create_timer }}</span>
                <p>{{ item.title }}</p>
            </van-step>
        </van-steps>

    </div>
</template>

<script setup>
import { allblog } from "@/api/request";
import { onMounted, ref, watch } from "vue";
const active = ref(0);
// 所有发布过的
const blogItemList = ref([])

// 滚动赋值
const scrollY = ref(0)
const scrolldone = ref(0)


onMounted(() => {

    allblog().then(({ data }) => {
        blogItemList.value = data.data
        console.log(blogItemList.value);
    })
    // 滚动事件
    window.onscroll = () => {
        scrollY.value = parseInt(document.documentElement.scrollTop)
    }
})
watch(scrollY, (nweVal, oldVal) => {
    // 判断滚动条为0就高亮第一个
    if (nweVal == 0) {
        active.value = 1
    }
    // 判断滚动条是向下 滚
    if (nweVal > oldVal) {
        if ((scrollY.value % 16) == 0) {
            active.value++
        }
    }
    // 判断滚动条是往回 滚
    if (nweVal < oldVal) {
        if ((scrollY.value % 16) == 0) {
            active.value--

        }
    }
})


</script>

<style lang="scss">
.timeStampView {
    padding-top: 3.75rem;
    min-height: 100vh;

    .timeStampHead {
        width: 90vw;
        height: 5rem;
        margin: 0 auto;
        padding: 1rem 0 0;
        font-size: 1.25rem;
        text-align: center;
        box-sizing: border-box;


    }

    .van-steps {
        background-color: #f7f7fb;

        .el-timeline {
            padding: .625rem;

            .el-timeline-item {
                .el-card {
                    h4 {
                        word-break: break-all;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }


                }
            }
        }
    }
}
</style>